<template>
  <div class="classroom-container">
    <!-- 顶部栏 -->
    <div class="top-bar">
      <div class="left-info">
        <span class="course-name">课堂2024/12/01</span>
        <div class="file-selector" v-click-outside="closeDropdown" v-if="showControls">
          <div class="selected-file" @click="toggleDropdown">
            <span class="file-name">{{ selectedFile }}</span>
            <span class="arrow-down" :class="{ 'arrow-up': showDropdown }">▼</span>
          </div>
          <!-- 下拉内容 -->
          <div class="dropdown-content" v-show="showDropdown">
            <div v-for="file in files" :key="file.id" class="dropdown-item" @click="selectFile(file)">
              {{ file.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="right-info">
        <span class="time">75:59:17</span>
        <button class="update-btn">更新讨论</button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧图片显示区域 -->
      <div class="image-viewer">
        <div class="image-container" @wheel="handleWheel">
          <img :src="currentImage" :style="{ transform: `scale(${scale})` }" class="display-image" />
        </div>

        <!-- 底部控制栏 -->
        <div class="control-bar">
          <div class="left-controls" v-if="showControls">
            <button class="control-btn" @click="showQuickAnswerResult = true">
              <i class="el-icon control-icon">⚡</i>
              <span>抢答</span>
            </button>
            <button v-if="currentSignIn" class="control-btn" @click="showSignInResult = true">
              <i class="el-icon control-icon">✍️</i>
              <span>签到 ({{ currentSignIn.signCode }})</span>
            </button>
            <button class="control-btn" id="more-btn">...</button>
          </div>
          <div class="center-controls">
            <button @click="decreaseScale">-</button>
            <span>{{ Math.round(scale * 100) }}%</span>
            <button @click="increaseScale">+</button>
          </div>
          <div class="right-controls" v-if="showControls">
            <button @click="prevImage">&lt;</button>
            <span>{{ currentIndex + 1 }} / {{ totalImages }}</span>
            <button @click="nextImage">&gt;</button>
          </div>
        </div>
      </div>

      <!-- 右侧讨论区域 -->
      <div class="discussion-panel">
        <div class="discussion-header">
          <span>课堂讨论</span>
        </div>
        <!-- 消息列表 -->
        <div class="discussion-list">
          <div v-for="(msg, index) in messages" :key="index" class="discussion-item">
            <div class="user-info">
              <span class="user-label">{{ msg.username || myusername }}</span>
              <span class="user-fire">🔥</span>
            </div>
            <div class="message-content">{{ msg.info || msg }}</div>
          </div>
        </div>
        <!-- 聊天发送框、按钮 -->
        <div class="discussion-footer">
          <div class="input-area">
            <input type="text" v-model="chatMessage" @keyup.enter="sendChatMessage" placeholder="说点什么..." />
          </div>
          <div class="footer-buttons">
            <button class="footer-btn">
              <span>回车键发送</span>
              <span class="arrow">←</span>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom-bar">
      <div class="tool-buttons">
        <button class="tool-btn">
          <span class="icon">📱</span>
          <span>邀请</span>
        </button>
        <!-- 修改添加活动按钮，添加下拉菜 -->
        <div class="tool-btn-dropdown">
          <button class="tool-btn" @mouseenter="showActivityMenu = true">
            <span class="icon">🎬</span>
            <span>添加活动</span>
          </button>
          <!-- 活动菜单 -->
          <div class="activity-menu" v-show="showActivityMenu" @mouseleave="showActivityMenu = false"
               @mouseenter="showActivityMenu = true">
            <div class="menu-item">
              <span class="menu-icon">📝</span>
              <span>测试</span>
            </div>
            <div class="menu-item">
              <span class="menu-icon">📊</span>
              <span>资料</span>
            </div>
            <div class="menu-item" @click="handleQuickAnswer">
              <span class="menu-icon">🎯</span>
              <span>抢答</span>
            </div>
            <div class="menu-item" @click="handleSignIn">
              <span class="menu-icon">✍️</span>
              <span>签到</span>
            </div>
            <div class="menu-item">
              <span class="menu-icon">💭</span>
              <span>讨论</span>
            </div>
            <div class="menu-item">
              <span class="menu-icon">📈</span>
              <span>评分</span>
            </div>
            <div class="menu-item">
              <span class="menu-icon">🎲</span>
              <span>投票</span>
            </div>
            <div class="menu-item">
              <span class="menu-icon">📋</span>
              <span>分组</span>
            </div>
          </div>
        </div>
      </div>
      <button class="end-class-btn">结束课堂</button>
    </div>

    <!-- 抢答表单 -->
    <quick-answer-form v-if="showQuickAnswerForm" @close="handleCloseQuickAnswer"
                       @submit="handleQuickAnswerSubmit" :send-message="sendMessage" />

    <!-- 抢答结果弹窗 -->
    <quick-answer-result v-if="showQuickAnswerResult" @close="showQuickAnswerResult = false" />

    <!-- 签到表单 -->
    <sign-in-form v-if="showSignInForm" :classroom-id="classroomId" :teacher-id="teacherId"
                  @close="handleCloseSignIn"
                  @submit="handleSignInSubmit" :send-message="sendMessage" />

    <!-- 签到结果弹窗 -->
    <sign-in-result v-if="showSignInResult && currentSignIn" :sign-in-data="currentSignIn"
                    :send-message="sendMessage"
                    @close="handleCloseSignInResult" />

    <!-- 学生签到表单 -->
    <student-sign-in-form v-if="showStudentSignInForm" :sign-code="currentSignCode"
                          :sign-id="currentSignIn?.signId"
                          :student-id="studentId"
                          :start-time="currentSignIn?.startTime"
                          :end-type="currentSignIn?.endType"
                          :send-message="sendMessage" @close="handleCloseStudentSignIn" />
  </div>
</template>

<script setup>
import {ref, computed, nextTick, onMounted, onUnmounted} from 'vue'
import QuickAnswerForm from '../components/QuickAnswerForm.vue'
import QuickAnswerResult from '../components/QuickAnswerResult.vue'
import SignInForm from '../components/SignInForm.vue'
import SignInResult from '../components/SignInResult.vue'
import StudentSignInForm from '../components/StudentSignInForm.vue'
import {ElMessage} from "element-plus";

// ----------------------------------------------同步信息 ↓----------------------------------------------

// 资源
const resourceData = ref({})
// 当前选中的目录ID
const currentCatalogId = ref(null)

// WebSocket 连接
const ws = ref(null);
// 连接状态?????
const socket = ref(false)
// 发送聊天信息
const chatMessage = ref('');
// 聊天列表
const messages = ref([])
// //发送信息的人的姓名
const myusername = ref('李四')

// 建立 WebSocket 连接
const connectWebSocket = () => {
  ws.value = new WebSocket('ws://192.168.100.132:8080/channel')

  // 连接成功
  ws.value.onopen = () => {
    console.log('连接建立')
    socket.value = true
    // WebSocket连接成功后，请求当前状态
    requestCurrentState()
  }

  // 接收服务器消息
  ws.value.onmessage = (event) => {
    console.log('收到服务器内容：' + event.data)
    try {
      const message = JSON.parse(event.data)

      switch (message.type) {
        case 'IMAGE_SYNC':
        case 'CATALOG_SYNC':
          const {catalogId, index} = message.data

          if (currentCatalogId.value !== catalogId) {
            currentCatalogId.value = catalogId
            // 更新文件选择
            const file = files.value.find(f => f.id === catalogId)
            if (file) {
              selectedFile.value = file.name
            }
          }
          currentIndex.value = index
          break

        case 'CURRENT_STATE':
          if (message.data && message.data.currentCatalogId) {
            const {currentCatalogId: serverCatalogId, currentIndex: serverIndex} = message.data
            if (currentCatalogId.value !== serverCatalogId) {
              currentCatalogId.value = serverCatalogId
              // 更新文件选择
              const file = files.value.find(f => f.id === serverCatalogId)
              if (file) {
                selectedFile.value = file.name
              }
            }
            currentIndex.value = serverIndex
          }
          break

        case 'CHAT_MESSAGE':
          const {info, username} = message.data;
          myusername.value = username;
          messages.value.push(info);
          // 接收新消息后滚动到部
          scrollToBottom();
          break;

        case 'SIGN_IN_SYNC':
          if (props.isTeacher) {
            // 老师端：显示签到结果
            const signInData = {
              signId: message.data.id,
              signName: message.data.signName,
              signCode: message.data.signCode,
              endType: parseInt(message.data.signTime),
              startTime: new Date().getTime(),
              studentList: message.signUserList.map(student => ({
                userId: student.userId,
                userName: student.userName,
                signStatus: student.signStatus
              }))
            }

            // 更新当前签到数据
            currentSignIn.value = signInData

            // 显示签到结果弹窗
            showSignInResult.value = true
          } else {
            // 学生端：显示签到表单
            currentSignIn.value = {
              signId: message.data.id,
              signCode: message.data.signCode,
              startTime: new Date().getTime(),
              endType: parseInt(message.data.signTime)
            }
            currentSignCode.value = message.data.signCode
            showStudentSignInForm.value = true
          }
          break;

        case 'STUDENT_SIGN_IN':
          if (props.isTeacher && currentSignIn.value) {
            // 找到对应的学生并更新状态
            const {userId, status} = message.data
            const studentToUpdate = currentSignIn.value.studentList.find(
                student => student.userId === userId
            )

            if (studentToUpdate) {
              studentToUpdate.signStatus = status
              // 强制更新视图
              currentSignIn.value = {...currentSignIn.value}
            }
          }
          break;

        case 'TEACHER_SIGN_IN':
          if (props.isTeacher && currentSignIn.value) {
            // 找到对应的学生并更新状态
            const signUserId = message.signUserId
            const studentToUpdate = currentSignIn.value.studentList.find(
                student => student.userId === signUserId
            )

            if (studentToUpdate) {
              studentToUpdate.signStatus = '已签到'
              // 强制更新视图
              currentSignIn.value = {...currentSignIn.value}
            }
          }
          break;

        default:
          console.log('未知的消息类型:', message.type);
      }
    } catch (error) {
      console.error('处理收到的消息失败:', error)
    }
  }

  // 监听WebSocket关闭事件
  ws.value.onclose = () => {
    console.log('WebSocket 连接已关闭')
    socket.value = false
    reconnectWebSocket()
  }
}

// 请求状态
const requestCurrentState = () => {
  sendMessage({
    type: 'REQUEST_STATE'
  })
}

// 给后端发送同步消息
const sendMessage = (message) => {
  if (ws.value && ws.value.readyState === WebSocket.OPEN) {
    console.log('------------------------' + JSON.stringify(message))
    ws.value.send(JSON.stringify(message))
  }
}

// 获取资源数据
const fetchResourceData = async () => {
  try {
    // 点击后获取到的对应的资源ID 从跳转目标页面进行获取
    const resourceList = [6, 11];

    // 获取资源数据
    const response = await fetch('http://192.168.100.132:8080/classRoom/getClassResource', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(resourceList)
    })

    const data = await response.json()

    if (data.code === 200) {
      resourceData.value = data.t
      const firstCatalogId = Object.keys(data.t)[0]
      currentCatalogId.value = firstCatalogId
    }
  } catch (error) {
    console.error('获取件资源失败:', error)
  }
}

// ----------------------------------------------同步信息 ↑----------------------------------------------

// 计算当前可用的文件列表
const files = computed(() => {
  return Object.keys(resourceData.value).map(catalogId => ({
    id: catalogId,
    name: resourceData.value[catalogId][0].modelName,
  }))
})

// 计算当前选中的资源的图列表
const images = computed(() => {
  if (!currentCatalogId.value || !resourceData.value[currentCatalogId.value]) {
    return []
  }
  return resourceData.value[currentCatalogId.value].map(item => item.photoUrl)
})

// 选择文件
const selectFile = (file) => {
  currentCatalogId.value = file.id
  currentIndex.value = 0 // 切换资源时重置图片索引
  showDropdown.value = false

  // 发送同步消息
  sendMessage({
    type: 'CATALOG_SYNC',
    data: {
      catalogId: file.id,
      index: 0
    }
  })
}

// 计算当前选中的文件名
const selectedFile = computed(() => {
  const file = files.value.find(f => f.id === currentCatalogId.value)
  return file ? file.name : ''
})

// 在组件挂载时获取资源数据
onMounted(() => {
  fetchResourceData()
  connectWebSocket()
})

// 在组件卸载时关闭 WebSocket 连接
onUnmounted(() => {
  if (ws.value) {
    ws.value.close()
  }
})

// 添加滚动到底部的方法
const scrollToBottom = () => {
  nextTick(() => {
    const discussionList = document.querySelector('.discussion-list')
    if (discussionList) {
      discussionList.scrollTop = discussionList.scrollHeight
    }
  })
}

// 修改发送消息的方法
const sendChatMessage = () => {
  if (chatMessage.value.trim() === '') {
    alert('请输入聊天信息');
    return;
  }

  sendMessage({
    type: 'CHAT_MESSAGE',
    data: {
      info: chatMessage.value,
      username: myusername.value
    }
  });

  // 清空输入框
  chatMessage.value = '';
}

// 当前图片索引
const currentIndex = ref(0)
// 图片缩放
const scale = ref(1)
// 计算图片总数
const totalImages = computed(() => images.value.length)

// 计算当前显示的图片
const currentImage = computed(() => {
  if (!images.value || images.value.length === 0) {
    return '' // 或返回一个默认的占位图片
  }
  return images.value[currentIndex.value]
})

// 图片缩放控制
const increaseScale = () => {
  scale.value = Math.min(scale.value + 0.1, 2)
}
const decreaseScale = () => {
  scale.value = Math.max(scale.value - 0.1, 0.1)
}

// 图片切换控制
const nextImage = () => {
  if (totalImages.value > 0) {
    currentIndex.value = (currentIndex.value + 1) % totalImages.value
    // 送同步消息
    sendMessage({
      type: 'IMAGE_SYNC',
      data: {
        imageUrl: currentImage.value,
        catalogId: currentCatalogId.value,
        index: currentIndex.value
      }
    })
  }
}
const prevImage = () => {
  if (totalImages.value > 0) {
    currentIndex.value = currentIndex.value === 0 ? totalImages.value - 1 : currentIndex.value - 1
    // 发送同步消息
    sendMessage({
      type: 'IMAGE_SYNC',
      data: {
        imageUrl: currentImage.value,
        catalogId: currentCatalogId.value,
        index: currentIndex.value
      }
    })
  }
}

// 文件选择相关
const showDropdown = ref(false)

const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

const closeDropdown = () => {
  showDropdown.value = false
}

// 点击外部关闭下拉菜单的指令
const vClickOutside = {
  mounted(el, binding) {
    el._clickOutside = (event) => {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event)
      }
    }
    document.addEventListener('click', el._clickOutside)
  },
  unmounted(el) {
    document.removeEventListener('click', el._clickOutside)
  }
}

// 添加鼠标滚轮处理函数
const handleWheel = (event) => {
  event.preventDefault() // 阻止默认滚动为
  const container = event.currentTarget
  container.scrollTop += event.deltaY
}

// 活动菜单控制
const showActivityMenu = ref(false)

// 抢答表单控制
const showQuickAnswerForm = ref(false)

// 抢答结果控制
const showQuickAnswerResult = ref(false)

// 签到表单控制
const showSignInForm = ref(false)

// 签到结果控制
const showSignInResult = ref(false)

// 前签到活动
const currentSignIn = ref(null)

// 处理抢答菜单点击
const handleQuickAnswer = () => {
  showQuickAnswerForm.value = true
  showActivityMenu.value = false  // 关闭活动菜单
}

// 处理关闭抢答表单
const handleCloseQuickAnswer = () => {
  showQuickAnswerForm.value = false
}

// 处理表单提交
const handleQuickAnswerSubmit = (formData) => {
  console.log('答活动数据：', formData)
  showQuickAnswerForm.value = false
}

// 处理签到菜点击
const handleSignIn = () => {
  showSignInForm.value = true
  showActivityMenu.value = false  // 关闭活动菜单
}

// 处理关闭签到表单
const handleCloseSignIn = () => {
  showSignInForm.value = false
}

// 添加课堂ID和老师ID
const classroomId = ref('1')
const teacherId = ref('2')
// 进入课堂的用户id
const userId = ref(1)

// 修改签到提交处理方法
const handleSignInSubmit = (signInData) => {
  // signInData 是后端返回的数据数组
  if (signInData && signInData.length > 0) {
    currentSignIn.value = {
      signName: signInData[0].signName,  // 从第一条数据中获取签到名称
      signCode: signInData[0].signCode,    // 使用 signId 作为签到码
      studentList: signInData.map(item => ({
        userId: item.userId,
        userName: item.userName,
        signStatus: item.signStatus
      }))
    }
  }

  showSignInForm.value = false
  nextTick(() => {
    showSignInResult.value = true
  })
}

const handleCloseSignInResult = () => {
  showSignInResult.value = false
}

// 添加 props 定义
const props = defineProps({
  isTeacher: {
    type: Boolean,
    default: true
  }
})

// 修改文件选择和图片切换按钮的显示逻辑
const showControls = computed(() => props.isTeacher)

// 重连相关
const isConnecting = ref(false)
const reconnectAttempts = ref(0)
const maxReconnectAttempts = 5

const reconnectWebSocket = () => {
  if (isConnecting.value || reconnectAttempts.value >= maxReconnectAttempts) return

  isConnecting.value = true
  setTimeout(() => {
    reconnectAttempts.value++
    connectWebSocket()
    isConnecting.value = false
  }, 3000) // 3秒后重试
}

// 添加控制学生签到表单显示的状态
const showStudentSignInForm = ref(false)
const currentSignCode = ref('')

// 添加处理学生签到表单关闭的方法
const handleCloseStudentSignIn = () => {
  showStudentSignInForm.value = false
}
</script>

<style scoped>
.classroom-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #1e1e1e;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #2d2d2d;
  color: white;
}

.left-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.course-name {
  font-size: 14px;
}

.file-name {
  color: #888;
  font-size: 14px;
}

.arrow-down {
  color: #888;
  font-size: 12px;
}

.right-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.time {
  color: #888;
}

.update-btn {
  padding: 4px 12px;
  background: none;
  border: none;
  color: #4169e1;
  cursor: pointer;
}

.main-content {
  display: flex;
  flex: 1;
  gap: 1px;
  background-color: #1e1e1e;
  height: calc(100vh - 120px);
}

.image-viewer {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #2d2d2d;
}

.image-container {
  flex: 1;
  overflow: auto;
  padding: 10px;
  background-color: #2d2d2d;
}

.display-image {
  max-width: 600px;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  background-color: white;
  display: block;
  margin: 0 auto;
  transform-origin: top center;
}

/* 在较小屏上的样式 */
@media screen and (max-width: 1200px) {
  .display-image {
    max-width: 500px;
  }
}

@media screen and (max-width: 992px) {
  .display-image {
    max-width: 400px;
  }
}

.control-bar {
  height: 50px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: white;
}

.left-controls,
.center-controls,
.right-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px 8px;
}

.control-icon {
  font-size: 16px;
}

.center-controls button,
.right-controls button {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.discussion-panel {
  width: 280px;
  background-color: #2d2d2d;
  display: flex;
  flex-direction: column;
  margin-right: 1px;
}

.discussion-header {
  padding: 16px;
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid #3d3d3d;
}

.discussion-list {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.discussion-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-label {
  display: inline-block;
  padding: 2px 8px;
  background-color: #3d3d3d;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
}

.user-fire {
  font-size: 12px;
}

.user-name {
  display: inline-block;
  padding: 8px 12px;
  background-color: #3d3d3d;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}

.discussion-footer {
  padding: 12px;
  border-top: 1px solid #3d3d3d;
}

.input-area {
  margin-bottom: 8px;
  width: 100%;
}

.input-area input {
  width: 100%;
  padding: 8px 12px;
  background-color: #3d3d3d;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.input-area input::placeholder {
  color: #888;
}

.footer-buttons {
  display: flex;
  justify-content: flex-end;
}

.footer-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: none;
  border: none;
  color: #888;
  font-size: 12px;
  cursor: pointer;
}

.arrow {
  font-size: 14px;
}

/* 自定义滚动条样式 */
.discussion-list::-webkit-scrollbar {
  width: 4px;
}

.discussion-list::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.discussion-list::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 2px;
}

.discussion-list::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

.bottom-bar {
  height: 60px;
  background-color: #2d2d2d;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.tool-buttons {
  display: flex;
  gap: 20px;
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.tool-btn .icon {
  font-size: 20px;
}

.end-class-btn {
  padding: 8px 20px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.end-class-btn:hover {
  background-color: #ff7875;
}

.file-selector {
  position: relative;
  cursor: pointer;
}

.selected-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background-color: #3d3d3d;
  border-radius: 4px;
  min-width: 200px;
}

.file-name {
  color: #fff;
  font-size: 14px;
}

.arrow-down {
  color: #888;
  font-size: 12px;
  transition: transform 0.3s;
}

.arrow-up {
  transform: rotate(180deg);
}

.dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background-color: #3d3d3d;
  border-radius: 4px;
  overflow: hidden;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-item {
  padding: 8px 12px;
  color: #fff;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #4a4a4a;
}

/* 自定义图片容器的滚动条样式 */
.image-container::-webkit-scrollbar {
  width: 6px;
}

.image-container::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.image-container::-webkit-scrollbar-thumb {
  background: #3d3d3d;
  border-radius: 3px;
}

.image-container::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

.tool-btn-dropdown {
  position: relative;
}

.activity-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background-color: #3d3d3d;
  border-radius: 4px;
  overflow: hidden;
  width: 200px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 8px;
  gap: 4px;
  z-index: 1000;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.menu-item:hover {
  background-color: #4a4a4a;
}

.menu-icon {
  font-size: 20px;
}

.menu-item span:last-child {
  font-size: 12px;
  color: #fff;
}

/* 修改消息相关样 */
.discussion-list {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.discussion-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.message-content {
  display: inline-block;
  padding: 8px 12px;
  background-color: #3d3d3d;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  word-break: break-word;
}
</style>
